<template>
  <div class="home">
    <div class="header-left">
      <span class="iconfont">&#xe771;</span>
    </div>
    <div class="header-center">
      <span class="iconfont">&#xe644;</span>
      输入城市/景点
      </div>
    <div class="header-right">
      <router-link to="/city" class="city">
        {{this.$store.state.city}}
      </router-link>
      <span class="iconfont">&#xe65a;</span>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props:{
    city:String
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.home 
  display flex
  height  0.9rem
  line-height 0.9rem
  color   #ffffff
  background-color $bgColor
.header-left
  float left
  width .6rem
  text-align center
  font-weight bold
.header-center
  flex 1
  background-color  #ffffff
  color  #333
  margin-top .12rem
  height  .66rem
  line-height  .66rem
  margin-left .2rem
  margin-right .4rem
  border-radius .2rem
  padding-left  .2rem
.header-right
  float right
  width 1.6rem
  text-align center
.header-right .city
  color #ffffff
</style>